<template >
     <ul class="list">
         <li class="item" 
         v-for="item of letters" :key="item"
          :ref="item"
          @click="handleLetterClick"
          @touchstart="handleTouchStart"
          @touchmove="handleTouchMove"
          @touchend="handleTouchEnd"
         > {{ item }}  </li>
     </ul>
</template>
<script>
export default {
    name:'CityAlphabet',
    props:{
        cities: Object 
    },
    data(){
        return{
            touchStatus: false,
            startY : 0,
            timer: null 
        }
    },
    updated(){
        this.startY = this.$refs ['A'][0].offsetTop
    },
    computed:{
        letters(){
            const letters=[]
            for( let i in this.cities){
                letters.push(i)
            }
            return letters
        }
    },
    methods:{
        handleLetterClick(e){ 
            this.$emit('change', e.target.innerText)
           // console.log(e.target.innerText)
        },
        handleTouchStart(){
            this.touchStatus=true 
        },
        handleTouchMove(e){
            if(this.touchStatus){
                if(this.timer){
                    clearTimeout(this.timer)
                }
                this.timer=setTimeout(() => {
                    
                 const startY=  this.startY
              //  console.log (startY)
                const touchY = e.touches[0].clientY -80
              //  console.log(touchY)  
                const index =  Math.floor ( ( touchY - startY)  /20 )  
              //  console.log(index) 
                if(index >=0 &&  index < this.letters.length){
                     this.$emit ('change', this.letters[index])
                }

                }, 16);
           
            }
        },
        handleTouchEnd(){
            this.touchStatus=false 

        }
    },
}
</script>
<style lang="stylus" scoped >
@import '~@/assets/style/varibles.styl'
.list
    display:flex
    flex-direction: column 
    justify-content: center 
    position: absolute 
    right:0
    top:1.58rem 
    bottom: 0
    width : .4rem
    .item 
        line-height : .4rem
        text-align: center 
        color : $bgColor 
</style>
